<template>
  <div class="boardBody list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('督办任务') }}</span>
    </div>
    <el-form ref="queryForm" :model="params" :inline="true">
      <el-form-item :label="$t('任务名称')" prop="name">
        <el-input v-model="params.name" :placeholder="$t('任务名称')" clearable />
      </el-form-item>
      <el-form-item :label="$t('执行人')" prop="executor">
        <UserSelect
          v-model="params.executor"
          :placeholder="$t('执行人')"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('执行部门')" prop="executiveDepartmentId">
        <treeSelect
          v-model="params.executiveDepartmentId"
          :default-expand-all="true"
          :data="deptOptions"
          :placeholder="$t('请选择')"
          clearable
        >
          <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
            {{ $t(node.label) }}
            <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
          </label>
        </treeSelect>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <div class="boardKanban">
      <div v-for="data in initData" :key="data.key">
        <Kanban
          :list.sync="data.data.rows"
          :group="group"
          class="kanban"
          :header-text="data.dictLabel"
          :num="data.data.total"
          :code="data.dictValue"
          :param="params"
          :color="data.color"
          :dept-options="deptOptions"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Kanban from '@/components/Kanban'
import { upataTaskStatusBase, listTaskBaseInit } from '@/api/deal/taskBase/taskBase'
import { treeselect } from '@/api/system/dept'
import treeSelect from '@/components/TreeSelect/index'
export default {
  name: 'DragKanbanDemo',
  components: {
    Kanban,
    treeSelect
  },
  data() {
    return {
      group: 'mission',
      params: {
        pageNum: 1,
        pageSize: 10,
        executor: undefined,
        executiveDepartmentId: undefined,
        name: undefined
      },
      updateId: undefined,
      initData: [],
      deptOptions: []
    }
  },
  created() {
    this.init()
    treeselect().then(response => {
      this.deptOptions = response.data
    })
  },
  methods: {
    // 初始化数据
    init() {
      this.getList()
    },
    // 获取修改id
    getUpdataId(id) {
      this.updateId = id
    },
    // 修改状态
    async upataData(code) {
      const upataData = {
        id: this.updateId,
        taskStatus: code
      }
      if (this.updateId !== undefined) {
        if (upataData.id === null) {
          return
        }
        await upataTaskStatusBase(upataData)
      }
    },
    // 查询
    queryHandle() {
      this.params.pageNum = 1
      this.getList()
    },
    // 重置
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    // 查询接口
    getList() {
      listTaskBaseInit(this.params).then(response => {
        this.initData = response.data
        console.log(this.initData)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.boardBody {
  margin: -15px;
  padding: 15px;
  height: calc(100% + 30px);
  overflow: hidden;
  padding-bottom: 0;
  background: #ebeef5;
}

.boardKanban {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
}

.kanban {
  margin-right: 10px;
}
</style>
